<template>
  <div id="maintainOrdeListDiv">
    <vxe-toolbar perfect>
      <template #buttons>
        <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="查询" :loading="tloading" @click="findMaintainOrderList"></vxe-button>
      </template>
    </vxe-toolbar>

    <div class="tableBox">
      <vxe-table ref="maintainOrderTableRef" class="mytable-scrollbar supplierTableClazz" border="inner" align="center" height="auto" :data="maintainOrderList" :loading="tloading" @current-change="maintainOrderRowClick" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
        <vxe-column type="seq" width="30" title=""></vxe-column>
        <vxe-column type="checkbox" width="30"></vxe-column>

        <vxe-column field="maintainNo" title="保养单号" width="150">
        </vxe-column>
        <vxe-column field="maintainStatus" title="保养状态" width="150">
          <template #default="{ row }">
            <div class="flex justify-atart">
              <span :class="getStatusClass(row)" style="margin-right: 2px;">
                {{ formatCommon(maintainStatusList, row.maintainStatus) }}
              </span>
              <el-tag type="danger" v-if="row.maintainStatus!='15'&&row.overdue>0">
                逾期{{row.overdue}}天
              </el-tag>
            </div>
          </template>
        </vxe-column>
        <vxe-column field="equiptCode" title="设备编码" width="100">
        </vxe-column>
        <vxe-column field="equiptName" title="设备名称" width="100">
        </vxe-column>
        <vxe-column field="specification" title="设备型号" width="150">
        </vxe-column>
        <vxe-column field="maintainType" title="保养类型" width="150">
          <template #default="{ row }">
            <span>{{ formatCommon(maintainTypeList, row.maintainType) }}</span>
          </template>
        </vxe-column>
        <vxe-column field="workHours" title="保养工时" width="150">
        </vxe-column>
        <vxe-column field="maintainFee" title="保养费用" width="150">
        </vxe-column>
        <vxe-column field="startDate" title="保养开始时间" width="150">
        </vxe-column>
        <vxe-column field="endDate" title="保养完成时间" width="150">
        </vxe-column>
        <vxe-column field="planNo" title="计划编号" width="150">
        </vxe-column>
        <vxe-column field="remark" title="说明">
          <template #default="{ row }">
            <span>{{ row.remark }}</span>
          </template>
        </vxe-column>

      </vxe-table>
      <vxe-pager align="left" min-height="32px" :current-page.sync="page.currentPage" :page-size.sync="page.pageSize" :total="page.totalResult" :layouts="[
                'PrevJump',
                'PrevPage',
                'Number',
                'NextPage',
                'NextJump',
                'Sizes',
                'FullJump',
                'Total'
              ]" @page-change="handleSizeChange($event)"></vxe-pager>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import moment from 'moment';
import { Splitpanes, Pane } from 'splitpanes';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
let { proxy }: any = getCurrentInstance();
import { AppStore } from '@/stores/store'; //'../../../stores/store';
let store = AppStore();
defineExpose({ initPage });

// 全局变量定义区 ==========
let searchForm = {
  searchValue: ''
};
let equiptId: any = null;
let tloading = ref(false); //加载状态
let maintainOrderList: any = reactive([]);
// 条数/页
const PageSizeList = [10, 15, 20, 50, 100, 200, 500];
// 分页
let page = reactive({
  currentPage: 1,
  pageSize: PageSizeList[1],
  totalResult: 0
});
let maintainTypeList: any = reactive([]); //选择字典
let maintainStatusList: any = reactive([]); //选择字典

function initPage(row: any) {
  getDictItemsList();
  equiptId = row;
  findMaintainOrderList();
}

//批量获取字典
async function getDictItemsList() {
  let dictTreeTypeCodes: any = ['maintainType', 'maintainStatus'];
  const codes = dictTreeTypeCodes.join(',');
  const url = '/api/sys/basDictDetail/findDictDetailListByDictCodes';
  const dictTreeTypeItems: any = await proxy.$http.get(url, { params: { code: codes } });
  const maintainTypes = dictTreeTypeItems.data.find((item) => item.code === 'maintainType');
  maintainTypeList.push(...maintainTypes.detailDataList);
  const maintainStatues = dictTreeTypeItems.data.find((item) => item.code === 'maintainStatus');
  maintainStatusList.push(...maintainStatues.detailDataList);
}

//点击每页数量(分页查询)
function handleSizeChange({ type, currentPage, pageSize }) {
  if (type === 'size') {
    page.currentPage = 1;
  } else {
    page.currentPage = currentPage;
  }
  page.pageSize = pageSize;
  findMaintainOrderList();
}
function findMaintainOrderList() {
  tloading.value = true;
  maintainOrderList.length = 0; //放入数据前清空数据
  const url = '/api/eq/eqMaintainOrder/findMaintainOrderPageList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        pageIndex: page.currentPage,
        pageSize: page.pageSize,
        equiptId: equiptId
      }
    })
    .then((res: any) => {
      maintainOrderList.push(...res.data.records);
      page.totalResult = res.data.total;

      tloading.value = false;
    })
    .catch((err: any) => {
      tloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function getStatusClass(row: any) {
  const status = row.maintainStatus;
  if (status == '0') {
    return 'text-orange';
  } else if (status == '5') {
    return 'text-green';
  } else if (status == '10') {
    return 'text-blue';
  } else if (status == '15') {
    return 'text-black';
  }
}

function formatCommon(arr: any, value: any) {
  for (const item of arr) {
    if (item.code == value) {
      return item.name;
    }
  }
}
</script>

<style lang="scss" scoped>
#maintainOrdeListDiv {
  height: 100%;
  //右侧质控项目表格
  .tableBox {
    height: calc(100% - 40px);
    background-color: $base-white;
  }
  // 附加按钮间距
  .button-blue,
  .button-red {
    margin: 5px 0 5px 5px;
  }

  //右侧质控项目表格
  .tableBox {
    height: calc(100% - 70px);
    background-color: $base-white;
  }
}
</style>
